<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.allWrap{
				width: 1250px;
				height: 150px;
				border: 1px solid #ccc;
				margin: 200px;
				position: relative;
			}
			.allWrap div{
				width: 150px;
				height: 100px;
				background-color: aqua;
				display: inline-block;
				text-align: center;
				line-height: 100px;
				font-size: 30px;
				position: absolute;
				top: 0;
			}
		</style>
	</head>
	<body>
		<!--
		(1)分别解释数组方法pop() push() unshift() shift()
		pop()从数组尾部删除元素; push()在数组尾部添加元素; unshift()在数组头部添加元素; shift()从数组头部删除元素
		
		(2)事件绑定和普通事件有什么区别
		普通事件直接写事件名即可
		事件绑定需用addEventListener来完成，其主要有两个特点：
		一、能同时绑定两个或两个以上相同的事件,不会覆盖
		二、能用这个方法,绑定多个事件
		此方法不兼容IE678,IE678用attachEvent来进行事件绑定
		
		(3)ajax请求的时候get和post方式的区别
		使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
		使用Get请求发送数据量小,Post请求发送数据量大
		
		(4)call和apply的区别
		call(thisObj，Object) 调用一个对象的一个方法，以另一个对象替换当前对象
		call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象 
		如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj
		
		apply(thisObj，[argArray]) 应用某一对象的一个方法，用另一个对象替换当前对象
		如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError
		如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数
		call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的
		
		(5)事件委托是什么, 使用事件委托有什么好处
		某个事件原本加在某个元素上，然而却把事件加到别的标签来完成事件，一般是加在父级上，其原理是事件冒泡
		事件委托的好处是提高性能，而且新添加的元素还会有之前的事件
		-->
		
		<!--用JS监听一排水平排列的按键, 用手指或鼠标拖动后改变位置, 让其插入到新的位置(不是对换)-->
		<div class="allWrap">
			<div class="div1">div1</div>
			<div class="div2">div2</div>
			<div class="div3">div3</div>
			<div class="div4">div4</div>
			<div class="div5">div5</div>
			<div class="div6">div6</div>
		</div>
		<script type="text/javascript">
			var allDivs=document.querySelectorAll(".allWrap div");
			var allDivsArr=[];
			for(var i=0;i<allDivs.length;i++){
				allDivs[i].index=i;
				allDivs[i].style.left=i*200+"px";
				allDivs[i].onmousedown=function(ev){
					var chaX=ev.clientX-allDivs[this.index].offsetLeft;
					document.onmousemove=function(ev){
						allDivs[this.index].style.left=ev.clientX-chaX+"px";
					}
				}
				allDivs[i].onmouseup=function(){
					document.onmousemove="";
				}
			}
		</script>
	</body>
</html>
